<template>
    <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <div class="side__title">
          <span>
            Wchime
          </span>
        </div>
        <div class="side__mune"><Side></Side></div>
      </el-aside>

      <el-container>
        <el-header><Header></Header></el-header>
        <el-main><router-view></router-view></el-main>
      </el-container>
    <!-- </el-container> -->
      <!-- <el-main>
        <router-view></router-view>
      </el-main> -->
    </el-container>
  </div>
</template>
     
    <script setup>
    import { ref, reactive, onMounted } from 'vue'
    import Side from './Side.vue'
    import MessageBox from '@/utils/MessageBox'
    import Header from './Header.vue'

    


    onMounted(()=>{

    })

    </script>

    <style scoped lang="scss">

      .common-layout {
        background-color: white;
        width: 100vw;
        height: 100vh;
        min-width: 900px;
        min-height: 520px;
        .el-container {
          height: 100%;
          // 就是不折叠的时候宽度是200px，折叠的时候宽度自适应
        }
      }
      svg {
        width: 1em;
        height: 1em;
        margin-right: 5px;
      }
      .el-header{
        display: flex;
        background-color: white;
        align-items: center;
        height: 50px;
        border-bottom: 1px solid var(--wchime-color-border);
    }
    .el-aside{
      height: 100%;
      // border-top-right-radius: 15px;
      // border-bottom-right-radius: 15px;
      background-color: #409eff;
      .side__title{
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        span{
          font-size: 35px;
          font-weight: 600;
          color: #fff;
        }
      }
      
    }
    .el-main{
      height: calc(100% - 60px);
      background-color: #fff;
      padding: 0px;
      .main__content{
        // padding: 10px 20px;
        width: 100%;
        height: 100%;
        background-color: white;
        .operate__row{
          height: 50px;
          // position: relative;
          display: flex;
          flex-direction: row-reverse;
          
          span{
            margin-right: 20px;
            // position: absolute;
            // right:20px
          }
        }
        
        
        
      }
    }
    .side__mune{
      height: calc(100% - 120px);
      overflow-y: auto;
      overflow-x: hidden;
      padding: 0 10px;
    }
    .side__mune::-webkit-scrollbar-thumb {
      background-color: transparent;
    }
    .side__mune:hover::-webkit-scrollbar-thumb {
      background-color: #888;
    }
    .side__logo{

      height: 80px;
      background-color: white;
      overflow: hidden;
      transition: width 1s linear 0.5s;

      div{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 100%;
        background-color: #409eff;
        border-top-right-radius: 15px;
        overflow: hidden;
        color: #fff;
        span{
          
          font-size: 20px;
          font-weight: 500;
        }
      }
    }
    .side__vesion{
      height: 40px;
      background-color: #F0F2F5;
      color: #fff;
      div{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        background-color: #409eff;
        border-bottom-right-radius: 15px;
      }
    }
    </style>